<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeft>
      <q-btn color="primary" outline unelevated @click="handleBind('bind')">
        {{ $t('Binding') }}
      </q-btn>
      <q-btn color="primary" outline unelevated @click="handleBind('unbind')">
        {{ $t('Unbind') }}
      </q-btn>
      <q-btn outline text-color="primary" @click="handleSync">
        {{ $t('Misc.SynchronizeRCSData') }}
      </q-btn>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails')}`" :menuBtn="false" :persistent="false"
           width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="formInfo" cols="2"></QInfo>
  </q-modal>
  <q-modal v-model="bindVisible" :header="header" :width="500" @beforeClose="beforeClose" @confirm="submitForm">
    <qx-form ref="FormRef" v-model="formInfo" :option="tableOption"></qx-form>
  </q-modal>
  <q-modal v-model="syncModelVisible" :header="$t('Misc.SynchronizeRCSData')" width="400" @beforeClose="beforeClose"
           @confirm="submitSync">
    <qx-form ref="FormRef" v-model="formInfo" :option="syncOption"></qx-form>
  </q-modal>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n.js'
import { postAPI } from 'src/api/index.js'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { rackDirections, updateModes } from 'src/views/CarrierCore/enum.js'
import { computed, onMounted, ref } from 'vue'
import { createDialog } from 'src/utils/utils.js'

const header = ref('')
const formInfo = ref({})
const FormRef = ref(null)
const AGVBrands = ref([])
const searchForm = ref({})
const bindVisible = ref(false)
const modalVisible = ref(false)
const syncModelVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/bindPointShelves/list' })
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))
const brandProps = computed(() => ({ label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' }))
const syncOption = computed(() => {
  return {
    span: 22, labelWidth: 90,
    column: [{
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      props: brandProps.value, required: true
    }, {
      label: `${i18n.t('MapCore.LocationMap')}`, field: 'mapShortName', minWidth: 100, required: true
    }]
  }
})
const tableOption = computed(() => {
  return {
    span: 22, export: true, labelWidth: 100, headerWidth: 60, searchSpan: 4, searchLabelWidth: 60,
    column: [{
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      props: brandProps.value, required: true, hide: true, export: false, search: false, showInfo: false
    }, {
      label: `${i18n.t('CarrierCore.RackCode')}`, field: 'shelvesCode', minWidth: 100, required: true
    }, {
      label: `${i18n.t('CarrierCore.RackDirection')}`, field: 'shelvesDir', type: 'radio', useTag: true,
      options: rackDirections.value, minWidth: 100, search: false, value: '0'
    }, {
      label: `${i18n.t('MapCore.StationCode')}`, field: 'mapDataCode', minWidth: 100, display: false
    }, {
      label: `${i18n.t('MapCore.StationName')}`, field: 'pointCode', minWidth: 100, required: true
    }, {
      label: `${i18n.t('MapCore.LocationMap')}`, field: 'mapShortName', minWidth: 100, display: false
    }, {
      label: `${i18n.t('LogCore.RequestCode')}`, field: 'reqCode', minWidth: 100, display: false,
      search: false, hide: true
    }, {
      label: `${i18n.t('LogCore.RequestTime')}`, field: 'reqTime', minWidth: 100, display: false, search: false
    }, {
      label: `${i18n.t('Misc.VersionNo')}`, field: 'revision', minWidth: 100, display: false,
      search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.RelatedTaskCode')}`, field: 'taskCode', minWidth: 100, display: false
    }, {
      label: `${i18n.t('Misc.UpdateMode')}`, field: 'updateMode', type: 'radio', options: updateModes.value,
      minWidth: 100, search: false, hide: true, export: false, value: '1', showInfo: false
    }, {
      label: `${i18n.t('Misc.LastUpdateTime')}`, field: 'updatedTime', minWidth: 90, search: false,
      display: false, hide: true
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', minWidth: 100, search: false, display: false
    }]
  }
})

const handleBind = (action) => {
  header.value = action === 'bind' ? `${i18n.t('Binding')}` : `${i18n.t('Unbind')}`
  formInfo.value = { action }
  bindVisible.value = true
}
const rowDblClick = row => {
  formInfo.value = row
  modalVisible.value = true
}
const handleSync = () => {
  const msg = `${i18n.t('Misc.SyncTip1')}`
  createDialog({ msg }, () => {
    syncModelVisible.value = true
  }, () => {})
}
const formatSearchForm = () => ({ ...searchForm.value })
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
const beforeClose = () => {
  if (FormRef.value) FormRef.value.onReset()
  bindVisible.value = false
  modalVisible.value = false
  syncModelVisible.value = false
}
const submitForm = mDone => {
  FormRef.value.validate((form, done) => {
    const uri = form.action === 'bind' ? '/yfagv/api/bindPointShelves/bindPointShelves'
      : '/yfagv/api/bindPointShelves/unBindPointShelves'
    postAPI(uri, form, () => {
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}
const submitSync = mDone => {
  FormRef.value.validate((form, done) => {
    postAPI('/yfagv/api/bindPointShelves/refreshShelvesPointByMapShorNameFromRcs', form, () => {
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}

onMounted(startSearch)
</script>